<template>

<!---搜索表单-->
    <!-- <div class="search-div">
        <el-form label-width="70px" size="small">
            <el-row>
                <el-col :span="12">
                <el-form-item label="运动类别">
                    <el-select
                    class="m-2"
                    placeholder="请选择"
                    size="small"
                    style="width: 100px"
                    v-model="queryDto.sportsId"
                    >
                    <el-option
                        v-for="item in sporList"
                        :key="item.id"
                        :label="item.category"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
                </el-col>
            </el-row>
            <el-row style="display:flex">
                <el-button type="primary" size="small" @click="findMovements">
                    搜索
                </el-button>
                <el-button size="small" @click="resetData">重置</el-button>
            </el-row>
        </el-form>
    </div> -->

    <!--添加按钮-->
    <div class="tools-div">
        <el-button type="success" size="small" @click="addMovement">添 加 药品信息</el-button>
    </div>
    <!---数据表格-->
    <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号"/>
        <el-table-column prop="rname" label="药品标题" />
        <el-table-column prop="sort" label="药品分类" #default="scope">
            {{ scope.row.sort == 1 ? '处方药' : '非处方药' }}
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" align="center" width="280" #default="scope">
            <!-- <el-button type="primary" size="small" @click="editShow(scope.row)">
                编辑
            </el-button> -->
            <el-button type="danger" size="small" @click="deleteById(scope.row)">
                删除
            </el-button>
        </el-table-column>
    </el-table>

    <!-- 添加/修改 -->
    <el-dialog v-model="dialogVisible" title="添加/修改" width="40%">
        <el-form label-width="120px">
            <el-form-item label="药品名称">
                <el-input v-model="rest.rname"/>
            </el-form-item>
            <el-form-item label="是否为非处方药">
                <el-radio-group v-model="rest.sort">
                    <el-radio :label="1">处方药</el-radio>
                    <el-radio :label="2">非处方药</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="药品规格">
                <el-input v-model="rest.specification"/>
            </el-form-item>
            <el-form-item label="药品详情">
                <el-input type="textarea" autosize placeholder="请输入内容" v-model="rest.details">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { ref,onMounted } from 'vue'; 
import {findRestoratives,AddRestoratives} from '@/api/restoratives';
import { ElMessage,ElMessageBox } from 'element-plus'

const list = ref([])
onMounted(()=>{
    findAll()
})

const findAll = async ()=>{
    const {data} = await findRestoratives()
    list.value = data
}

const dialogVisible = ref(false)

//初始化添加信息
const rest = ref({
    id:'',
    rname:'',
    sort:'',
    specification:'',
    details:''
})
//打开添加药品管理弹框
const addMovement = ()=>{
    dialogVisible.value = true
}
//添加
const submit = async()=>{
    if(!rest.value.id){
        await AddRestoratives(rest.value)
        dialogVisible.value = false
        findAll()
    }
}
</script>

<style lang="scss" scoped>

</style>